import React, { Component } from "react";
import { SafeAreaView, Text, View, StyleSheet, TouchableOpacity, Image, TextInput } from 'react-native';
import Constant from '../../utils/Constant'//全局变量
import { getImgUrl } from '../../utils/ComFunction';
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Header from "../../components/header";
import { ToastToUser } from "../../utils/CustomToast";

export default class FeedBack extends Component {

    constructor(props) {
        super(props);
        this.state = {
            effectiveDate: '',
            memberText: '',
            memberIcon: null,
            isShowVip: false,
            textNum: 0,
            content: '',
            phone: ''
        };
    }

    componentDidMount() {

    }

    render() {
        const navigation = this.props.navigation;
        return (
            <View
                style={styles.container}>
                <Header navigation={navigation} Title={'意见反馈'} hideSepLine={true} RightButton={() => this.renderRightButton()} />

                <View style={{ width: '100%' }}>
                    <TextInput
                        style={styles.inputStyle}
                        placeholder="产品哪里让您不爽了？告诉我们，我们把它改掉！"
                        multiline={true}
                        maxLength={500}
                        onChangeText={(input) => {

                            this.setState({
                                textNum: input.length,
                                content: input
                            })
                        }}>

                    </TextInput>

                    <Text style={styles.textNum}>{this.state.textNum}/500</Text>

                </View>


                <TextInput
                    style={styles.inputStyle2}
                    placeholder="万水千山总是情，留个电话行不行"
                    multiline={true}
                    maxLength={11}
                    inputMode='numeric'
                    onChangeText={(input) => {

                        this.setState({
                            phone: input
                        })
                    }}>

                </TextInput>

            </View>
        );
    }

    renderRightButton() {
        return (
            <TouchableOpacity
                style={styles.submitContainer}
                activeOpacity={0.8}
                onPress={() => {
                    this.feedBackSubmit()
                }}>
                <Text style={styles.submitText}>提交</Text>
            </TouchableOpacity>
        )
    }

    feedBackSubmit() {

        if (this.state.content.length == 0) {
            ToastToUser('请输入反馈内容')
            return
        }

        let params = {
            userId: Constant.userInfo.userId,
            phone: this.state.phone,
            fullname: Constant.userInfo.fullname,
            merchantName: Constant.userInfo.merchantName,
            content: this.state.content
        }

        HttpUtils.postRequest(HttpUrls.feedBack, params)
            .then((result) => {
                let code = result.code
                if (code == 0) {
                    let data = result.data
                    ToastToUser('感谢您提交的意见，我们会尽快跟您联系')
                    this.props.navigation.goBack()
                }
            })
            .catch((error) => {

            });
    }

};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f9f9f9',
    },
    submitContainer: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    submitText: {
        fontSize: 16,
        color: '#333333'
    },
    inputStyle: {

        marginLeft: 15,
        marginRight: 15,
        height: 150,
        backgroundColor: '#fff',
        borderRadius: 4,
        marginTop: 10,
        borderWidth: 1,
        borderColor: '#e3e3e3',
        padding: 10,
        textAlignVertical: 'top',
        fontSize: 14
    },

    inputStyle2: {

        marginLeft: 15,
        marginRight: 15,
        height: 50,
        backgroundColor: '#fff',
        borderRadius: 4,
        marginTop: 10,
        borderWidth: 1,
        borderColor: '#e3e3e3',
        padding: 10,
        fontSize: 14
    },

    textNum: {
        position: 'absolute',
        right: 25,
        bottom: 10,
        fontSize: 12,
        color: '#999999'
    },

});